<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-初始vue</title>
  <script type="text/javascript" src="/vue/vue.js"></script>
</head>
<body>
  <!-- 
    初始vue
      1：想要让一个Vue工作，就必须创建一个Vue实例。且要传入一个配置对象
      2：root容器里面的代码依然符合html规范，只不过传入一些特殊的Vue语法
      3：root容器里面的代码被称为【Vue模板】
      4：Vue实例和容器是一一对应的关系
      5：真实开发中只有一个Vue实例，并且会配合着组件一起使用
      6：{{xxx}}中的xxx要写js表达式（注意和js语句区分），且xxx可以自动读取到data中的所有属性
      7：一旦Vue中的data发生变化，那么页面中用到该数据的地方也会自动更新

      注意区分：
        1：js表达式：一个表达式会产生一个值，可以放在任何需要这个值的地方
          如下：
          （1）a
          （2）a + b
          （3）demo()  函数调用
          （4）x === y ? 'a' : 'b'
        
        2：js代码（语句）--- 控制代码执行的语句
          （1）if(){}
          （2）for(){}
          （3）
            .
            .
            .
   -->
  
  <!-- 创建一个容器 -->
  <div id="root">
    <h1>Hello,{{name}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.proproductionTip = false;

    // new 一个Vue实例，为指定的容器工作
    new Vue({
      // 设置一些指定的配置项
      el: '#root', // 为id选择器为root的容器创建一个Vue实例
      data: { // 暂时创建一个data对象，存放一些Vue实例数据，供el指定的容器去使用
        name: "孟凡荣", 
      }
    })
  </script>
</body>
</html>